import Vue from "vue";

import App from "./App.vue";

import VueRouter from "vue-router";
Vue.use(VueRouter);

import UsersA from "./components/UsersA.vue";
import UsersA1 from "./components/UsersA1.vue";
import UsersA2 from "./components/UsersA2.vue";
import UsersA21 from "./components/UsersA21.vue";
import UsersB from "./components/UsersB.vue";
import UsersC from "./components/UsersC.vue";
import NotFound from "./components/NotFound.vue";

const router = new VueRouter({
  routes: [
    {
      //
      path: "/users",
      name: "users",
      component: UsersA, //App
      children: [
        {
          path: "a1",
          name: "users-a1",
          component: UsersA1,
        },
        {
          path: "a2",
          name: "users-a2",
          component: UsersA2,
          children: [
            {
              path: "a21",
              name: "users-a21",
              component: UsersA21,
            },
          ],
        },
      ],
    },
    {
      path: "/users/b/:id",
      name: "usersb",
      component: UsersB, //App
    },
    {
      path: "/users/c",
      name: "usersc",
      component: UsersC, //App
    },
    {
      path: "*",
      component: NotFound,
    },
  ],
});

new Vue({
  render: (h) => h(App),
  router,
}).$mount("#app");
